<template>
	<view class="entertain">
		<xbd-page-card>
			<template>
				<view class="card">
					<xbd-image-title title="小保当业务招待上报" :image="require('@/static/image/supervision/wait.png')">
						<template>
							<view class="report" @click="record">
								<image src="@/static/image/supervision/icon5.png"></image> 上报记录
							</view>
						</template>
					</xbd-image-title>
					<view class="tag">
						<text style="color:#FC4F4F">*</text>招待名称
					</view>
					<view class="input">
						<uni-easyinput v-model="name" :inputBorder="false" maxlength="50" type="text"
							placeholderStyle="font-size:30rpx;color:#A0A7B8;" placeholder="请输入" />
					</view>
					<view class="tag">
						<text style="color:#FC4F4F">*</text>招待类型
					</view>
					<view>
						<xbd-select :carId.sync="type" :visible.sync="visible" :infoList="infoList">
							<template>
								<view class="select" @click="visible = true">
									<view class="text2" :style="{color: type==='请选择'?'#A0A7B8':''}">
										{{ type }}
									</view>
									<image class="image" src="@/static/image/down.svg">
									</image>
								</view>
							</template>
						</xbd-select>
					</view>
					<view class="tag">
						招待单位
					</view>
					<view class="text">
						{{userInfo.department}}
					</view>
					<view class="tag">
						<text style="color:#FC4F4F">*</text>来宾人数
					</view>
					<view class="input">
						<uni-easyinput v-model="guest" :inputBorder="false" maxlength="12" type="text"
							placeholderStyle="font-size:30rpx;color:#A0A7B8;" placeholder="请输入" />
					</view>
					<view class="tag">
						<text style="color:#FC4F4F">*</text>预计费用
					</view>
					<view class="input">
						<uni-easyinput v-model="cost" :inputBorder="false" maxlength="12" type="text"
							placeholderStyle="font-size:30rpx;color:#A0A7B8;" placeholder="请输入" />
					</view>
					<view class="tag">
						<text style="color:#FC4F4F">*</text>招待时间
					</view>
					<view class="box">
						<xbd-date-day fields="day" :date="sta_date" :visible.sync="visible1" @setDate="setDate1">
							<template>
								<view class="date" @click="visible1 = true">
									<text :style="sta_date=='开始时间' ? 'color: #A0A7B8;' : ''"> {{ sta_date }}</text>
								</view>
							</template>
						</xbd-date-day>
						<view style="margin-right: 40rpx;">
							至
						</view>

						<xbd-date-day fields="day" :date="end_date" :visible.sync="visible2" @setDate="setDate2">
							<template>
								<view class="date" @click="visible2 = true">
									<text :style="end_date=='结束时间' ? 'color: #A0A7B8;' : ''">{{ end_date }}</text>
								</view>
							</template>
						</xbd-date-day>
					</view>
					<view class="tag">
						<text style="color:#FC4F4F">*</text>接待申请及业务联系单
					</view>
					<view class="image">
						<view class="box-image" v-for="(item,index) in upImg" :key="index">
							<image class="del" src="@/static/image/del.png" @click="del(item)"></image>
							<image class="images" :src="item" @click="image_click(item)"></image>
						</view>
						<view v-if="upImg.length !==6" class="upload" @click="choose_image">
							<image src="@/static/image/supervision/upload.png" mode=""></image>
							<view class="">
								上传图片
							</view>
						</view>
					</view>
				</view>
			</template>
		</xbd-page-card>
		<xbd-button text="提交" @clickBtn="submit()"></xbd-button>
	</view>
</template>

<script>
	import {
		Supervision
	} from '@/api/index.js';
	import {
		mapState
	} from 'vuex';
	export default {
		name: "entertain",
		data() {
			return {
				flag: true,
				date1: '日期选择',
				visible1: false,
				visible2: false,
				visible: false,
				sta_date: '开始时间',
				end_date: '结束时间',
				num: '',

				name: '',
				guest: '',
				cost: '',
				upImg: [],
				data_image: [],
				type: "请选择",

				infoList: [{
						value: '1',
						label: '内部招待'
					},
					{
						value: '2',
						label: '外部招待'
					}
				],
			}
		},
		computed: {
			...mapState(['userInfo'])
		},
		methods: {

			record() {
				uni.navigateTo({
					url: `/pages/supervision/business/list?type=0`,
				});

			},
			setDate1(date) {
				console.log(date);
				this.sta_date = date;
			},
			setDate2(date) {
				console.log(date);
				this.end_date = date;
			},
			del(val) {
				console.log(val)
				this.upImg = this.upImg.filter(item => {
					return item !== val
				})
			},
			image_click(img) {
				// 点击预览图片
				dd.previewImage({
					current: 1,
					urls: [img],
				});
				console.log(img, 'img')
			},
			choose_image() {
				uni.chooseImage({
					count: 6 - this.upImg.length,
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						// console.log(chooseImageRes, 'chooseImageRes.tempFilePaths;')
						for (let i = 0; i < tempFilePaths.length; i++) {
							uni.uploadFile({
								url: 'http://113.135.192.25:18398/api/upload', //仅为示例，非真实的接口地址  后期接口变更需调整
								header: {
									'Content-Type': 'multipart/form-data',
									'Authorization': uni.getStorageSync("token")
								},
								filePath: tempFilePaths[i],
								fileType: 'image',
								name: 'file',
								success: (uploadFileRes) => {
									if (this.upImg.indexOf(JSON.parse(uploadFileRes.data).data
											.url) == -1 && (JSON.parse(uploadFileRes.data).data.url
											.indexOf('.jpg') !== -1 || JSON.parse(uploadFileRes
												.data).data.url.indexOf('.png') !== -1|| JSON.parse(uploadFileRes.data).data.url.indexOf('.jpeg')!== -1)) {
										this.upImg.push(JSON.parse(uploadFileRes.data).data.url)
										const a = JSON.parse(uploadFileRes.data).data.url
											.substring(
												JSON.parse(uploadFileRes.data).data.url
												.lastIndexOf(
													"upload") + 7, JSON.parse(uploadFileRes.data)
												.data
												.url.length)
										this.data_image.push(a)
									}
								}
							});
						}

					}
				});
				// console.log(this.upImg)
			},
			submit() {
				console.log(this.userInfo, 'userInfo')
				var reg = /^[0-9]*$/;
				if (this.name === '') {
					return this.$showToast('招待名称：请填写内容');
				} else if (this.type === '请选择') {
					return this.$showToast('招待类型：请选择内容');
				} else if (this.guest === '') {
					return this.$showToast('来宾人数：请填写内容');
				} else if (!reg.test(this.guest)) {
					return this.$showToast('来宾人数：请输入0或正整数');
				} else if (this.cost === '') {
					return this.$showToast('预计费用：请填写内容');
				} else if (!reg.test(this.cost)) {
					return this.$showToast('预计费用：请输入0或正整数');
				} else if (this.sta_date === '开始时间') {
					return this.$showToast('招待时间：请填写开始时间');
				} else if (this.end_date === '结束时间') {
					return this.$showToast('招待时间：请填写结束时间');
				} else if (this.end_date < this.sta_date) {
					return this.$showToast('招待时间：结束时间不能早于开始时间');
				} else if (this.upImg.length === 0) {
					return this.$showToast('接待申请及业务联系单：请上传相关图片');
				}
				if(this.flag){
					this.flag=false
					this.report()
				}

			},
			async report() {
				let a = []

				a = this.upImg.map((item,index) => {
					let r = {
						name:this.data_image[index],
						url:item
					}
					return r
				})

				const o = {
					name: this.name,
					type: this.type,
					department: this.userInfo.department,
					guest: +this.guest,
					cost: +this.cost,
					start_time: this.sta_date,
					end_time: this.end_date,
					evidence: a
				}
				const res = await Supervision.postServiceReport(o)
				if (res.success) {
					uni.redirectTo({
						url: `/pages/supervision/business/list?type=0`,
					});
				} else {
					this.flag = true
				}
				this.$showToast(res.msg);
			}

		}
	};
</script>

<style lang="scss" scoped>
	::v-deep .uni-easyinput__content-input {
		font-size: 30rpx !important;
	}

	::v-deep .uni-easyinput__placeholder-class {
		font-size: 30rpx;
	}

	.entertain {
		.card {
			.report {
				display: flex;
				align-items: center;
				box-sizing: border-box;
				padding: 10rpx 20rpx;
				height: 56rpx;
				width: 190rpx;
				font-size: 28rpx;
				font-weight: 500;
				color: #000623;
				border: 2rpx solid #D0D6E5;
				border-bottom-left-radius: 30rpx;
				border-top-left-radius: 30rpx;
				margin-right: -32rpx;

				image {
					width: 28rpx;
					height: 28rpx;
				}
			}

			.input {
				font-size: 30rpx;
				border-bottom: 2rpx solid #EBEEF5;
				margin-bottom: 30rpx;
			}

			.tag {
				font-size: 30rpx;
				font-weight: 400;
				text-align: left;
				color: #000623;
				margin-bottom: 20rpx;
			}

			.date {
				width: 200rpx;
				text-align: left;
				font-size: 30rpx;
			}

			.text {
				padding-top: 20rpx;
				font-size: 32rpx;
				font-weight: 400;
				color: #000623;
				margin-bottom: 40rpx;
			}

			.box {
				margin-top: 30rpx;
				display: flex;
				align-items: center;
				padding: 10rpx 0;
				border-bottom: 2rpx solid #EBEEF5;
				margin-bottom: 40rpx;
			}

			.select {
				// margin: 100rpx 0 50rpx;
				width: 100%;
				line-height: 72rpx;
				font-size: 30rpx;
				background-color: #fff;
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 10rpx 0 0rpx 20rpx;
				box-sizing: border-box;
				color: #A0A7B8;
				border-bottom: 2rpx solid #EBEEF5;
				margin-bottom: 40rpx;

				.text2 {
					font-size: 30rpx;
					font-weight: 400;
					color: #000623;
				}

				image {
					width: 28rpx;
					height: 30rpx;
				}
			}

			.image {
				margin-top: 50rpx;
				display: flex;
				flex-wrap: wrap;
				margin-bottom: 20rpx;

				.box-image {
					position: relative;
				}

				.del {
					width: 38rpx;
					height: 38rpx;
					position: absolute;
					top: -16rpx;
					right: 4rpx;
				}

				.images {
					margin-right: 20rpx;
					width: 140rpx;
					height: 140rpx;
				}

				.upload {

					display: flex;
					justify-content: center;
					flex-direction: column;
					align-items: center;
					font-size: 20rpx;
					color: #A0A7B8;
					width: 140rpx;
					height: 140rpx;
					border: 2rpx dashed #d0d6e5;
					border-radius: 8rpx;
					line-height: normal;

					image {
						width: 28rpx;
						height: 28rpx;
						margin-right: 0;
						margin-bottom: 10rpx;
					}
				}
			}
		}
	}
</style>
